<template>
  <view v-if="isLoad" class="m-order">
    <x-page-order ref="x-page-order" />
  </view>
</template>

<script>
import { mapState } from 'vuex';
import config from '@/config';
import XPageOrder from '@/components/x-page-order';

export default {
  name: 'Order',
  components: {
    XPageOrder
  },
  props: {},
  data() {
    return {
      loading: false,
      isLoad: false
    };
  },
  computed: {
    ...mapState({
      updateOrderId: state => state['order'].orderId,
      updateList: state => state['order'].update
    })
  },
  watch: {},
  onLoad() {
    this.$store.dispatch('user/login').then(() => {
      this.isLoad = true;
    }).catch(() => {
      this.isLoad = true;
    });
  },
  onShow() {
    if (this.$refs['x-page-order']) {
      // 如果缓存中有订单id，显示列表的时候，去更新当前的订单信息
      if (this.updateOrderId) {
        this.$refs['x-page-order'].updateListItem(this.updateOrderId);
      }
      // 更新列表
      if (this.updateList) {
        this.$refs['x-page-order'].getOrderList();
      }
    }
  },
  /**
   * 下拉刷新
   * */
  onPullDownRefresh() {
    try {
      this.$refs['x-page-order'].handlePullDownRefresh();
    } catch (e) {
      console.warn('this.$refs[\'x-page-order\'].onPullDownRefresh', e);
    }
  },
  // 页面触底加载数据
  onReachBottom() {
    try {
      this.$refs['x-page-order'].handleReachBottom();
    } catch (e) {
      console.warn('this.$refs[\'x-page-order\'].handleReachBottom', e);
    }
  },
  // 分享转发
  onShareAppMessage(e) {
    const title = config.appName;
    let path = '/pages/index/index';
    let imageUrl;
    const { obj } = e.target.dataset;
    if (obj?.id) {
      imageUrl = `${obj.productImgUrl}?x-oss-process=image/format,jpg`;
      path = `/pages/share-collage/index?orderId=${obj.id}`;
    }
    return {
      imageUrl,
      title,
      path
    };
  },
  methods: {

  }
};
</script>

<style lang="scss">
  .m-order{
    min-height: 100vh;
    .empty{
      height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center;
      .pic{ width: 400px; height: 400px;}
      .tips{ color: #666; font-size: 30px; width: 400px; padding-top: 20px;}
      .button{ padding-top: 50px;}
    }
  }
</style>
